<template>
	<view class="share-container">
		<!-- 海报展示区域 -->
		<view class="poster-display">
			<view class="poster-wrapper">
				<u-image 
					:src="query.invite_poster" 
					mode="widthFix" 
					width="680rpx" 
					height="auto"
					:show-loading="false"
					:lazy-load="true" 
					class="poster-image"
					@click.stop="$PREVIEW_IMAGE(query.invite_poster)">
				</u-image>
				<!-- 预览提示 -->
				<view class="preview-tip">
					<u-icon name="eye" color="#ffffff" size="24"></u-icon>
					<text class="tip-text">点击预览</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮区域 -->
		<view class="action-buttons">
			<view class="button-container">
				<button class="save-btn" @tap="shareFc">
					<u-icon name="download" color="#73F0EA" size="20"></u-icon>
					<text class="btn-text">保存到相册</text>
				</button>
				<button class="share-btn" @click.stop="shareShow">
					<u-icon name="share" color="#ffffff" size="20"></u-icon>
					<text class="btn-text">分享给好友</text>
				</button>
			</view>
		</view>
		
		<!-- 优化后的弹窗显示海报 -->
		<view class="poster-modal" :class="{ 'modal-show': qrShow }" @tap="hideQr">
			<view class="modal-content" @tap.stop>
				<view class="modal-poster">
					<image :src="query.invite_poster" mode="widthFix" class="modal-image"></image>
				</view>
				<view class="modal-actions">
					<button class="modal-save-btn" @tap.stop="saveImage(query.invite_poster)">
						<u-icon name="download" color="#ffffff" size="18"></u-icon>
						<text>保存图片</text>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 分享提示遮罩 -->
		<u-mask :show="TipShow" @click="TipShow = false">
			<view class="share-tip">
				<image :src="$IMG_URL('/static/tabbar/share.png')" mode="aspectFill" class="share-guide"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		invitePoster
	} from '@/api/user.js'
	export default {
		data() {
			return {
				poster: {},
				qrShow: false,
				query: {},
				duration: 1,
				TipShow: false
			}
		},
		onLoad(e) {
			this.getinvitePoster(e)
		},
		methods: {
			getinvitePoster(e) {
				invitePoster(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.query = res.data
						this.$u.mpShare = {
							title: this.query.invite_title, // 默认为小程序名称，可自定义
							path: '/pages/index/index?scene=' + this.query.scene + '&is_share=' + 1,  // 默认为当前页面路径，一般无需修改，QQ小程序不支持
							imageUrl: this.query.share_image
						}
					}
				})
			},
			shareFc() {
				this.qrShow = true;
			},
			saveImage(e) {
				this.$SAVERIMG(e);
				this.qrShow = false;
			},
			hideQr() {
				this.qrShow = false;
			},
			shareShow() {
				this.TipShow = true
			}
		}
	}
</script>

<style lang="scss">


	page {
	background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}

.share-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
	
	/* 海报展示区域 */
	.poster-display {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
		
		.poster-wrapper {
			position: relative;
			border-radius: 20rpx;
			box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
			overflow: hidden;
			transition: transform 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.poster-image {
				border-radius: 20rpx;
				display: block;
			}
			
			.preview-tip {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 30rpx;
				padding: 10rpx 20rpx;
				display: flex;
				align-items: center;
				gap: 8rpx;
				
				.tip-text {
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
	}
	
	/* 操作按钮区域 */
	.action-buttons {
		padding: 20rpx;
		
		.button-container {
			display: flex;
			gap: 20rpx;
			
			.save-btn, .share-btn {
				flex: 1;
				height: 96rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				font-size: 32rpx;
				font-weight: 600;
				transition: all 0.2s ease;
				
				&:active {
					transform: scale(0.98);
				}
			}
			
			.save-btn {
				background: #ffffff;
				border: 2rpx solid #73F0EA;
				color: #73F0EA;
			}
			
			.share-btn {
				background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
				color: #ffffff;
				box-shadow: 0 8rpx 25rpx rgba(115, 240, 234, 0.3);
			}
		}
	}
	
	/* 弹窗样式 */
	.poster-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		
		&.modal-show {
			opacity: 1;
			visibility: visible;
		}
		
		.modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.9);
			transition: transform 0.3s ease;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 40rpx;
			width: 600rpx;
			max-width: 90%;
			
			.modal-show & {
				transform: translate(-50%, -50%) scale(1);
			}
			
			.modal-poster {
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
				
				.modal-image {
					width: 100%;
					display: block;
				}
			}
			
			.modal-actions {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				
				.modal-save-btn {
					background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
					color: #ffffff;
					border: none;
					border-radius: 12rpx;
					padding: 20rpx 40rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 28rpx;
					font-weight: 500;
					transition: all 0.2s ease;
					
					&:active {
						transform: scale(0.98);
					}
				}
			}
		}
	}
	
	/* 分享提示 */
	.share-tip {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 40rpx;
		
		.share-guide {
			width: 398rpx;
			height: 236rpx;
		}
	}
}


</style>